<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /*让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。*/
        /*#div1 {*/
            /*background-color: red;*/
            /*width: 960px;*/
            /*height: 100px;*/
            /*margin: 0px auto;*/
        /*}*/

        /*div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0*/
        #div1 {
            background-color: red;
            width: 960px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        /*仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了*/
        /*#div1 {*/
            /*background-color: red;*/
            /*width: 960px;*/
            /*height: 100px;*/
            /*position: absolute;*/
            /*top: 50%;*/
            /*left: 50%;*/
            /*transform: translate(-50%,-50%);*/
        /*}*/
    </style>
</head>
<body>
    <div id="div1">div1</div>
</body>
</html>